<template>
  <div>
    <Row :gutter="24">
      <Col :xl="7" :lg="7" :md="24" :sm="24" :xs="24" class="ivu-mb">
      <Card :bordered="false" dis-hover>
        <div class="ivu-text-center">
          <Avatar :src="info.headimgUrl" class="setting-user-avatar" />
          <p class="ivu-m-8">
            <strong v-font="20">{{ info.name }}</strong>
          </p>
          <p>{{ user.sign }}</p>
        </div>
        <DescriptionList :col="1" class="ivu-mt">
          <Description>
            <template #term>
              <Icon type="ios-briefcase-outline" class="ivu-mr-8" />
            </template>
            <span>
              <Tag v-for="(item, index) in roleNames" :key="index" :color="colors[index]">{{ item }}</Tag>
            </span>
          </Description>
          <Description>
            <template #term>
              <Icon type="ios-git-network" class="ivu-mr-8" />
            </template>
            <span>职场</span>
          </Description>
          <Description>
            <template #term>
              <Icon type="ios-pin-outline" class="ivu-mr-8" />
            </template>
            <span>上海</span>
          </Description>
        </DescriptionList>
        <Divider dashed />
        <DescriptionList title="标签" />
        <div>
          <Tag v-for="item in user.tags" :key="item">{{ item }}</Tag>
          <Input v-model="newIcon" ref="tag" size="small" autofocus v-if="addIcon" v-width="100"
            @on-enter="handleAddNewTag" @on-blur="addIcon = false" />
          <Button size="small" type="dashed" icon="md-add" v-else @click="handleOpenNewTag" />
        </div>
      </Card>
      </Col>
      <Col :xl=17 :lg="17" :md="24" :sm="24" :xs="24">
      <Card :bordered="false" dis-hover :padding="0">

      </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import iconWeibo from '@/assets/svg/icon-social-weibo.svg';
import iconZhihu from '@/assets/svg/icon-social-zhihu.svg';
import iconFacebook from '@/assets/svg/icon-social-facebook.svg';
import iconTwitter from '@/assets/svg/icon-social-twitter.svg';

export default {
  name: 'setting-user',
  data() {
    return {
      colors: ['magenta', 'volcano', 'cyan', 'purple', 'geekblue'],
      user: {
        sign: '满招损，谦受益。',
        tags: [
          '大神',
          '最强王者',
          '落地成盒',
          '很有想法',
          '懂点设计',
          '菜烧的不错'
        ]
      },
      icon: {
        weibo: iconWeibo,
        zhihu: iconZhihu,
        facebook: iconFacebook,
        twitter: iconTwitter
      },
      addIcon: false,
      newIcon: '',
      currentTab: 'article',
    }
  },
  computed: {
    ...mapState('admin/user', [
      'info'
    ]),
    ...mapState('admin/role', [
      'roles'
    ]),
    roleNames() {
      return this.info.roleCodeList.map(roleCode => {
        const userRole = this.roles.find(role => role.roleCode === roleCode)
        if (userRole) {
          return userRole.roleName
        } else {
          return ''
        }
      })
    }
  },
  methods: {
    handleOpenNewTag() {
      this.addIcon = true;
      this.$nextTick(() => {
        this.$refs.tag.focus();
      });
    },
    handleAddNewTag() {
      if (this.newIcon) {
        this.user.tags.push(this.newIcon);
        this.newIcon = '';
        this.addIcon = false;
      }
    }
  }
}
</script>
<style lang="less">
.setting-user {
  &-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
  }
}
</style>
